<script setup lang="ts">
import {
  defineComponent,
  onActivated,
  onDeactivated,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  ShallowRef,
  shallowRef,
  watch
} from "vue";
import moment from 'moment'
import Trajectory from "@/components/map-trajectory/trajectory";
import { trackBus } from "@/utils/gps/event";
import TrackDetail from "@/views/dashboard/right/track/trackDetail.vue";
import CdlMap from "@/components/map";

const name = ['curve', 'trackPoint'] as const
type pageName = (typeof name)[number]

const trajectoryRef = ref()
const activeName = ref<pageName>('trackPoint')
const playLocation = ref({
  currentStep: 0,
  isPlay: false,
  speed: 1000
})

const loading = ref(false)
const taskList = ref<any[]>([])
const currentComponent = shallowRef(TrackDetail)

onMounted(()=>{
  trackBus.on("track_init", trajectoryInit)
})
onUnmounted(()=>{
  trackBus.off("track_init")
})
onDeactivated(()=>{
  if(taskList.value.length > 0 && playLocation.value.isPlay) trajectoryRef.value.handlePause()
})

// @ts-ignore
const componentList = reactive<{ [name: pageName]: ShallowRef<typeof defineComponent<any>> }>({
  curve: shallowRef(),
  trackPoint: shallowRef(TrackDetail)
})

function trajectoryInit(data: {positions: any[], stops: any[], trips: any[], alarms: []}){
  trajectoryRef.value.restResources()
  trajectoryRef.value.initData({
    trajectoryData: data
  })
  taskList.value = data.positions
}


function controlHisVideo(t: number) {
  const time = moment(t * 1000).format('YYYY-MM-DD HH:mm:ss')
  console.log(time)
  // fixedPointPlayback(time, 5)
}

function tabChange(name) {
  currentComponent.value = componentList[name]
}

</script>

<template>
  <div class="content">
    <div class="bg">
<!--      <Trajectory ref="trajectoryRef" v-model="playLocation" :loading="loading" control="simple"></Trajectory>-->
      <CdlMap ref="trajectoryRef" v-model="playLocation" HistoricalTrajectory control="trajectory"></CdlMap>
    </div>
    <div class="info">
      <el-tabs v-model="activeName" class="item-padding" @tab-change="tabChange">
        <el-tab-pane label="曲线数据" name="curve"></el-tab-pane>
        <el-tab-pane label="轨迹点" name="trackPoint"></el-tab-pane>
      </el-tabs>
      <component :is="currentComponent" v-model:model="playLocation" :data="taskList" class="set_height" id="track_point"
                 @controlVideo="controlHisVideo"></component>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  overflow: hidden;
}
.bg {
  display: flex;
  height: 70%;
}
.set_height {
  height: calc(100% - 40px);
}
.info {
  height: 30%;
}
</style>
